<template>
  <div class='container'>
    <el-card class="tags">
      <el-form
        :inline="true"
        :model="tags"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item label="目录名称">
              <el-input
                v-model="tags.directoryName"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="tags.state"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  label="启用"
                  value="1"
                ></el-option>
                <el-option
                  label="禁用"
                  value="0"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-button
              size="small"
              @click="clear"
            >清除</el-button>
            <el-button
              type="primary"
              size="small"
              @click="search"
            >搜索</el-button>
          </el-col>
          <el-col :span="6">
            <el-row
              type="flex"
              justify="end"
            >
              <el-col :span="9">
                <el-form-item>
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    size="small"
                    @click="showVisible = true"
                  >新增目录</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!-- 提示条 -->
      <el-alert
        :title="`数据一共${tags.total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格数据 -->
      <el-table
        style="width: 100%"
        class="tags-table"
        :data="items"
      >
        <el-table-column
          label="序号"
          type="index"
        >
        </el-table-column>
        <el-table-column
          label="所属学科"
          prop="subjectName"
        >
        </el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        >
        </el-table-column>
        <el-table-column
          label="创建者"
          prop="username"
        >
        </el-table-column>
        <el-table-column
          label="创建日期"
          prop="addDate"
        >
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          label="面试题数量"
          prop="totals"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          prop="state"
        >
          <template slot-scope="scope">
            {{scope.row.state===1 ? '已启用': '已禁用'}}
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              :disabled='false'
              @click="handState(scope.row.id,scope.row.state)"
            >{{scope.row.state === 1?'禁用':'启用'}}</el-button>
            <el-button
              type="text"
              :disabled="!scope.row.state"
              @click="edit(scope.row.id)"
            >修改</el-button>
            <el-button
              type="text"
              :disabled="!scope.row.state"
              @click="close(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
      >
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="tags.total"
          :current-page="tags.page"
          :page-sizes="[5,10,20,50]"
          :page-size="tags.pagesize"
          @current-change="changePage"
          @size-change='changeSize'
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 弹层 -->
    <el-dialog
      :visible='showVisible'
      :title="visibleName"
      width="28%"
      @close='btnClose'
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item
          label="所属学科"
          prop="region"
          label-width="80px"
        >
          <el-select
            v-model="form.region"
            placeholder="请选择"
            size="small"
            class="el-input"
          >
            <el-option
              v-for="(item, index) in subItems"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入目录名称"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="btnClose">取 消</el-button>
        <el-button
          type="primary"
          @click="btnOK"
        >确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove, add, update, detail } from '@/api/hmmm/directorys'
import { simple as subSimple } from '@/api/hmmm/subjects'

export default {
  data () {
    return {
      form: {
        region: '', // 学科名称的value
        name: '' // 目录名称
      },
      rules: {
        name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }],
        region: [
          { required: true, message: '请选择', trigger: 'change' }]
      },
      tags: {
        page: 1, // 当前页数
        pagesize: 10, // 一页显示数量
        total: 0, // 全部数据
        directoryName: null, // 目录名称
        state: null// 目录状态
      },
      items: [], // 数据列表
      subItems: [], // 下拉列表数据
      // showDisabled: false, // 按钮是否启用 默认启用 false
      showVisible: false // 弹层开关
    }
  },
  computed: {
    visibleName () {
      return this.form.id ? '修改目录' : '新增目录'
    }
  },
  created () {
    this.tagsList()
    this.subSimple()
  },
  methods: {
    // 获取下拉列表数据
    async subSimple () {
      const { data } = await subSimple()
      this.subItems = data
    },
    // 添加取消开关
    btnClose () {
      this.form = {
        region: '', // 学科名称的value
        name: '' // 目录名称
      }
      this.$refs.form.resetFields()
      this.showVisible = false
    },
    // 修改 数据回写
    async edit (id) {
      const { data } = await detail({ id })
      this.form = { region: data.subjectID, name: data.directoryName, ...data }
      this.showVisible = true
    },
    // 添加确定开关
    async btnOK () {
      await this.$refs.form.validate()
      try {
        // 修改
        if (this.form.id) {
          // 因为后面的数据会替换掉前面的 而修改数据是新数据替换老数据 所以先获取的表单要放前面
          await update({ ...this.form, subjectID: this.form.region, directoryName: this.form.name })
          this.$message.success('修改成功')
        } else {
          // 新增
          await add({ subjectID: this.form.region, directoryName: this.form.name })
          this.$message.success('添加成功')
        }
        this.showVisible = false
        this.tagsList()
      } catch (error) {
        this.$message('操作错误')
      }
    },
    // 切换分页
    changePage (newPage) {
      this.tags.page = newPage
      this.tagsList()
    },
    // 切换当前显示多少页
    changeSize (newSize) {
      this.tags.pagesize = newSize
      this.tagsList()
    },
    // 开关状态
    async handState (id, state) {
      try {
        if (state) {
          state = 0
        } else {
          state = 1
        }
        await changeState({ id, state })
        this.$message.success('操作成功')
        this.tagsList()
      } catch (error) {
        this.$message.error('操作错误')
      }
    },
    // 获取目录列表
    async tagsList () {
      const { data } = await list(this.tags)
      this.items = data.items
      this.tags.total = data.counts
      // console.log(this.items)
    },
    // 搜索框
    search () {
      this.tags.page = 1
      this.tagsList()
    },
    // 清空搜索框
    clear () {
      this.tags.directoryName = null
      this.tags.state = null
    },
    // 删除目录
    async close (id) {
      try {
        await this.$confirm('是否删除该目录？')
        await remove({ id })
        await this.$message.success('删除成功')
        this.tagsList()
      } catch (error) {
        this.$message('取消操作')
      }
    }
  }
}
</script>
<style>
.container {
  background-color: #fff;
  margin: 10px;
}

.tags-table {
  margin-top: 15px;
}
</style>
